<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="queryForm"
					:inline="true"
					:model="queryData"
					label-width="auto"
				>
					<el-form-item
						:label="$t('common.choose_merchant') + ':'"
						prop="merchantId"
					>
						<merchant-select
							v-model="queryData.merchantId"
							:placeholder="$t('common.please_choose')"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="
							$t('operation.activity_notice.activity_title') + ':'
						"
					>
						<el-input
							v-model="queryData.title"
							clearable
							:maxlength="100"
							size="medium"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
					<el-form-item :label="$t('operation.send_obj')">
						<el-select
							v-model="queryData.sendObj"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in sendObjTypes"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('common.createBy') + ':'">
						<el-input
							v-model="queryData.createdBy"
							clearable
							:maxlength="20"
							size="medium"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('502021')"
							type="warning"
							icon="el-icon-folder"
							:disabled="loading"
							size="medium"
							@click="openCreateDialog"
						>
							{{ $t('common.add') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="list"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="title"
						align="center"
						:label="$t('operation.activity_notice.activity_title')"
					>
						<template slot-scope="scope">
							<div>
								<p v-if="scope.row.title">
									{{ $t('common.zh') }}：{{
										scope.row.title || '-'
									}}
								</p>
								<p v-if="scope.row.titleEn">
									{{ $t('common.en') }}：{{
										scope.row.titleEn || '-'
									}}
								</p>
								<p v-if="scope.row.titleTh">
									{{ $t('common.th') }}：{{
										scope.row.titleTh || '-'
									}}
								</p>
								<p v-if="scope.row.titleVi">
									{{ $t('common.vn') }}：{{
										scope.row.titleVi || '-'
									}}
								</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="
							$t('operation.activity_notice.activity_content')
						"
					>
						<template slot-scope="scope">
							<div>
								<p v-if="scope.row.content">
									{{ $t('common.zh') }}：{{
										scope.row.content || '-'
									}}
								</p>
								<p v-if="scope.row.contentEn">
									{{ $t('common.en') }}：{{
										scope.row.contentEn || '-'
									}}
								</p>
								<p v-if="scope.row.contentTh">
									{{ $t('common.th') }}：{{
										scope.row.contentTh || '-'
									}}
								</p>
								<p v-if="scope.row.contentVi">
									{{ $t('common.vn') }}：{{
										scope.row.contentVi || '-'
									}}
								</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						prop="sendObj"
						align="center"
						:label="$t('operation.send_obj')"
					>
						<template v-if="scope.row.sendObj" slot-scope="scope">
							<span>
								{{
									scope.row.sendObj === 1
										? $t('operation.member')
										: $t('operation.device')
								}}
							</span>
						</template>
						<span v-else>-</span>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('operation.send_obj_detail')"
						prop="sendObj"
					>
						<template slot-scope="scope">
							<span
								v-if="
									scope.row.sendObj === 2 &&
										scope.row.deviceType &&
										scope.row.deviceType.length === 0
								"
							>
								{{ joinDeviceTypeArr() }}
							</span>
							<span
								v-else-if="
									scope.row.sendObj === 2 &&
										scope.row.deviceType &&
										scope.row.deviceType.length
								"
							>
								{{ filterTerminal(scope.row.deviceType) }}
							</span>
							<div
								v-if="
									scope.row.sendObj === 1 &&
										scope.row.userType === 0
								"
							>
								{{ $t('common.all') }}
							</div>
							<div
								v-else-if="
									scope.row.sendObj === 1 &&
										scope.row.userType === 1
								"
							>
								{{
									scope.row.objDetail
										.split(',')
										.splice(0, 3)
										.join(',')
								}}
								<div
									v-if="
										scope.row.objDetail.split(',').length >
											3
									"
									class="decoration"
									@click="lookMemberList(scope.row)"
								>
									{{ $t('operation.show_more') }}
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						prop="createdBy"
						align="center"
						:label="$t('common.createBy')"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.createdBy || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="createdAt"
						align="center"
						:label="$t('common.createAt')"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.createdAt || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="operating"
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('502023')"
								:disabled="scope.row.retract === 1"
								type="primary"
								size="medium"
								@click="withdraw(scope.row)"
							>
								{{ $t('common.withdraw') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
			<el-dialog
				:title="$t('common.add')"
				:visible.sync="dialogFormVisible"
				:destroy-on-close="true"
				width="838px"
				center
				class="rempadding"
				@close="clear"
			>
				<el-form
					ref="formSub"
					:model="dialogForm"
					:rules="dataRule"
					label-width="auto"
				>
					<el-form-item
						:label="$t('common.choose_merchant') + ':'"
						prop="merchantId"
					>
						<merchant-select
							v-model="dialogForm.merchantId"
							:merchantInfo.sync="merchantInfoA"
							:placeholder="$t('common.please_choose')"
							@change="handleMerchantIdChange"
						></merchant-select>
					</el-form-item>
					<!-- 活动消息标题 -->
					<h4 style="text-align:center">
						{{ $t('operation.activity_notice.activity_title') }}
					</h4>
					<el-form-item
						v-if="filterLanguages('zh_CN')"
						:label="$t('common.zh') + ':'"
						class="tagheight"
						prop="title"
					>
						<el-input
							v-model="dialogForm.title"
							:placeholder="$t('common.please_enter')"
							maxlength="100"
							clearable
							show-word-limit
							autocomplete="off"
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="filterLanguages('en_US')"
						:label="$t('common.en') + ':'"
						class="tagheight"
						prop="titleEn"
					>
						<el-input
							v-model="dialogForm.titleEn"
							:placeholder="$t('common.please_enter')"
							maxlength="100"
							clearable
							show-word-limit
							autocomplete="off"
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="filterLanguages('th_TH')"
						:label="$t('common.th') + ':'"
						class="tagheight"
						prop="titleTh"
					>
						<el-input
							v-model="dialogForm.titleTh"
							:placeholder="$t('common.please_enter')"
							maxlength="100"
							clearable
							show-word-limit
							autocomplete="off"
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="filterLanguages('vi_VN')"
						:label="$t('common.vn') + ':'"
						class="tagheight"
						prop="titleVi"
						error=""
					>
						<el-input
							v-model="dialogForm.titleVi"
							:placeholder="$t('common.please_enter')"
							maxlength="100"
							clearable
							show-word-limit
							autocomplete="off"
						></el-input>
					</el-form-item>
					<el-divider></el-divider>
					<!-- 活动消息内容 -->
					<h4 style="text-align:center">
						{{ $t('operation.activity_notice.activity_content') }}
					</h4>
					<el-form-item
						v-if="filterLanguages('zh_CN')"
						:label="$t('common.zh') + ':'"
						class="tagheight"
						prop="content"
					>
						<el-input
							v-model="dialogForm.content"
							:placeholder="$t('common.please_enter')"
							maxlength="2000"
							clearable
							type="textarea"
							show-word-limit
							v-input="{ name: 'noEmpty' }"
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="filterLanguages('en_US')"
						:label="$t('common.en') + ':'"
						class="tagheight"
						prop="contentEn"
					>
						<el-input
							v-model="dialogForm.contentEn"
							:placeholder="$t('common.please_enter')"
							maxlength="2000"
							clearable
							type="textarea"
							show-word-limit
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="filterLanguages('th_TH')"
						:label="$t('common.th') + ':'"
						class="tagheight"
						prop="contentTh"
					>
						<el-input
							v-model="dialogForm.contentTh"
							:placeholder="$t('common.please_enter')"
							maxlength="2000"
							clearable
							type="textarea"
							show-word-limit
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="filterLanguages('vi_VN')"
						:label="$t('common.vn') + ':'"
						class="tagheight"
						prop="contentVi"
					>
						<el-input
							v-model="dialogForm.contentVi"
							:placeholder="$t('common.please_enter')"
							maxlength="2000"
							clearable
							type="textarea"
							show-word-limit
						></el-input>
					</el-form-item>
					<el-divider></el-divider>

					<el-form-item
						:label="$t('operation.send_obj')"
						class="tagheight"
						prop="sendObj"
					>
						<el-select
							v-model="dialogForm.sendObj"
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in sendObjTypes"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-show="dialogForm.sendObj === '1'"
						:label="$t('common.member_type') + ':'"
						class="tagheight"
						prop="userType"
					>
						<el-select
							v-model="dialogForm.userType"
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in userTypes"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-show="dialogForm.sendObj === '2'"
						:label="$t('operation.send_device')"
						class="tagheight"
						prop="deviceType"
					>
						<el-select
							v-model="dialogForm.deviceType"
							:placeholder="$t('common.please_choose')"
							multiple
							clearable
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in loginDeviceType"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-if="
							dialogForm.sendObj === '1' &&
								dialogForm.userType === '1'
						"
						:label="$t('common.member_number') + ':'"
						class="tagheight"
						prop="objDetail"
						:rules="[
							{
								required: true,
								message: memberValidErrorMsg,
								trigger: 'blur'
							}
						]"
					>
						<el-input
							v-model="dialogForm.objDetail"
							:placeholder="memberValidErrorMsg"
							clearable
							show-word-limit
						></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						type="primary"
						:loading="loading"
						@click="subAddOrEidt"
					>
						{{ $t('common.save') }}
					</el-button>
				</div>
			</el-dialog>
			<el-dialog
				:title="$t('common.check')"
				:visible.sync="lookVisible"
				:destroy-on-close="true"
				class="rempadding"
			>
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					size="mini"
					border
					class="small-size-table"
					:data="userList"
					style="width: 100%; margin-bottom: 15px"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						type="index"
						align="center"
						:label="$t('common.serial_number')"
						width="100"
					>
						<template slot-scope="scope">
							<span>{{ _getSerialNum(scope.$index) }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('operation.send_member_number')"
					>
						<template slot-scope="scope">
							{{ scope.row.username }}
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					:current-page="pageD"
					background
					class="fenye"
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="sizeD"
					:page-sizes="pageSizes"
					:total="summary"
					@current-change="handleCurrentChangeDialog"
					@size-change="handleSizeChangeDialog"
				></el-pagination>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { mapGetters } from 'vuex'

export default {
	name: routerNames.activity,
	mixins: [list],
	data() {
		return {
			memberValidErrorMsg: this.$t('operation.input_tips1'),
			queryData: {
				merchantId: undefined,
				title: undefined,
				sendObj: undefined,
				createdBy: undefined
			},
			dialogFormVisible: false,
			dialogForm: {
				merchantId: undefined,
				sendObj: '1',
				deviceType: [],
				userType: '0',
				contentVi: '',
				contentTh: '',
				contentEn: '',
				content: '',
				titleVi: '',
				titleTh: '',
				titleEn: '',
				title: '',
				objDetail: ''
			},
			lookVisible: false,
			userList: [],
			pageD: 1,
			recordId: '',
			sizeD: 10,
			summary: 0,
			merchantInfoA: {
				languages: 'zh_CN'
			}
		}
	},
	computed: {
		...mapGetters(['merchantInfo']),
		blackStatusType() {
			return this.globalDics.blackStatusType || []
		},
		loginDeviceType() {
			return this.globalDics.loginDeviceType || []
		},
		userTypes() {
			return [
				{
					code: '1',
					description: this.$t('operation.specific_member')
				},
				{
					code: '0',
					description: this.$t('operation.all_member')
				}
			]
		},
		sendObjTypes() {
			return [
				{ code: '1', description: this.$t('operation.member') },
				{ code: '2', description: this.$t('operation.device') }
			]
		},
		dataRule() {
			return {
				title: [
					{
						required: true,
						message: this.$t(
							'operation.activity_notice.input_tips2'
						),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 100,
						message: this.$t('operation.limit100'),
						trigger: 'blur'
					}
				],
				titleEn: [
					{
						required: true,
						message: this.$t(
							'operation.activity_notice.input_tips2'
						),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 100,
						message: this.$t('operation.limit100'),
						trigger: 'blur'
					}
				],
				titleTh: [
					{
						required: true,
						message: this.$t(
							'operation.activity_notice.input_tips2'
						),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 100,
						message: this.$t('operation.limit100'),
						trigger: 'blur'
					}
				],
				titleVi: [
					{
						required: true,
						message: this.$t(
							'operation.activity_notice.input_tips2'
						),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 100,
						message: this.$t('operation.limit100'),
						trigger: 'blur'
					}
				],
				content: [
					{
						required: true,
						message: this.$t(
							'operation.activity_notice.input_tips4'
						),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 2000,
						message: this.$t('operation.limit2000'),
						trigger: 'blur'
					}
				],
				contentEn: [
					{
						required: true,
						message: this.$t(
							'operation.activity_notice.input_tips4'
						),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 2000,
						message: this.$t('operation.limit2000'),
						trigger: 'blur'
					}
				],
				contentTh: [
					{
						required: true,
						message: this.$t(
							'operation.activity_notice.input_tips4'
						),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 2000,
						message: this.$t('operation.limit2000'),
						trigger: 'blur'
					}
				],
				contentVi: [
					{
						required: true,
						message: this.$t(
							'operation.activity_notice.input_tips4'
						),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 2000,
						message: this.$t('operation.limit2000'),
						trigger: 'blur'
					}
				],
				sendObj: [
					{
						required: true,
						message: this.$t(
							'operation.activity_notice.input_tips6'
						),
						trigger: 'blur'
					}
				],
				merchantId: [
					{
						required: true,
						message: this.$t('operation.please_choose_merchant'),
						trigger: ['change']
					}
				],
				deviceType: [
					{
						required: true,
						message: this.$t('operation.input_tips2'),
						trigger: 'change'
					}
				],
				userType: [
					{
						required: true,
						message: this.$t(
							'operation.activity_notice.input_tips8'
						),
						trigger: 'change'
					}
				]
			}
		}
	},
	watch: {
		'dialogForm.userType'() {
			this.dialogForm.objDetail = undefined
		},
		'dialogForm.sendObj'(val) {
			if (val === '1') {
				this.dialogForm.deviceType = this.loginDeviceType.map(
					(i) => i.code
				)
				this.dialogForm.userType = '0'
			} else {
				this.dialogForm.deviceType = this.loginDeviceType.map(
					(i) => i.code
				)
				this.dialogForm.userType = '0'
			}
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
	},
	methods: {
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		handleMerchantIdChange() {
			this.dialogForm.contentVi = ''
			this.dialogForm.contentTh = ''
			this.dialogForm.contentEn = ''
			this.dialogForm.content = ''
			this.dialogForm.titleVi = ''
			this.dialogForm.titleTh = ''
			this.dialogForm.titleEn = ''
			this.dialogForm.title = ''
			this.$refs.formSub.clearValidate([
				'contentVi',
				'contentTh',
				'contentEn',
				'content',
				'titleVi',
				'titleTh',
				'titleEn',
				'title'
			])
		},
		filterLanguages(lang) {
			return this.merchantInfoA?.languages
				? this.merchantInfoA?.languages?.indexOf(lang) !== -1
				: false
		},
		loadData() {
			if (!this.queryData.merchantId) {
				this.loading = true
				this.list = []
				this.total = 0
				setTimeout(() => (this.loading = false), 500)
				return
			}
			const params = {
				noticeType: 2,
				...this.getParams(this.queryData)
			}
			for (const k in params) {
				if (params[k] === '') {
					delete params[k]
				}
			}
			this.loading = true
			this.$api
				.getOperateObConfigNoticeSelectAll(params)
				.then((res) => {
					const { record, totalRecord } = res.data || {}
					this.list = record || []
					this.total = totalRecord || 0
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},

		reset() {
			this.queryData = {
				merchantId: undefined,
				title: undefined,
				sendObj: undefined,
				createdBy: undefined
			}
			if (!this.$store.getters.isZk) {
				this.queryData.merchantId = this.$store.getters.merchantInfo.id
			} else {
				this.queryData.merchantId = undefined
			}
			this.pageNum = 1
			this.loadData()
		},
		openCreateDialog() {
			this.dialogForm.sendObj = '1'
			this.dialogForm.deviceType = this.loginDeviceType.map((i) => i.code)
			this.dialogForm.userType = '0'
			this.dialogForm.contentVi = ''
			this.dialogForm.contentTh = ''
			this.dialogForm.contentEn = ''
			this.dialogForm.content = ''
			this.dialogForm.titleVi = ''
			this.dialogForm.titleTh = ''
			this.dialogForm.titleEn = ''
			this.dialogForm.title = ''
			this.dialogForm.objDetail = ''
			if (!this.$store.getters.isZk) {
				this.dialogForm.merchantId = this.$store.getters.merchantInfo.id
			} else {
				this.dialogForm.merchantId = undefined
			}
			this.dialogFormVisible = true
			this.$nextTick(() => {
				this.$refs.formSub.clearValidate()
			})
		},

		subAddOrEidt() {
			const params = {
				noticeType: 2,
				...this.dialogForm
			}
			for (const k in params) {
				if (
					params[k] === '' ||
					(Array.isArray(params[k]) && !params[k].length)
				) {
					delete params[k]
				}
			}
			if (params.deviceType) {
				params.deviceType = params.deviceType.join(',')
			}
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					this.loading = true
					if (this.dialogForm.sendObj === '1') {
						delete params.deviceType
					} else {
						delete params.userType
					}
					this.$api
						.getOperateConfigNoticeSave(params)
						.then((res) => {
							this.loading = false
							if (res?.code === 200) {
								this.$message.success(
									this.$t('common.action_success')
								)
								this.dialogFormVisible = false
								this.loadData()
							}
						})
						.catch((e) => {
							this.loading = false
						})
				}
			})
		},
		withdraw(row) {
			this.$confirm(
				`<strong>${this.$t(
					'operation.switch_status_tips4'
				)}?</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
					'operation.warning_tips'
				)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					const params = {}
					params.retract = 1
					params.noticeType = 2
					params.messageId = row.id
					this.$api
						.getOperateConfigNoticeRetract(params)
						.then((res) => {
							if (res?.code === 200) {
								this.$message.success(
									this.$t('operation.withdraw_success')
								)
								this.loadData()
							}
						})
				})
				.catch(() => {})
		},
		clear() {
			this.$refs.formSub.resetFields()
			// this.dialogForm = { sendObj: '1', deviceType: this.loginDeviceType.map(i=>i.code), userType: '0' }
		},
		// 弹框标签添加人数
		getOperateConfigNoticeSelectDetail(val) {
			const params = {}
			params.noticeId = this.recordId
			params.configType = 2
			params.pageNum = this.pageD
			params.pageSize = this.sizeD
			this.$api.getBwConfigNoticeDetails(params).then((res) => {
				if (res?.code === 200) {
					this.userList = res.data?.record || []
					this.summary = res.data?.totalRecord || 0
					this.lookVisible = true
				}
			})
		},
		lookMemberList(val) {
			this.pageD = 1
			this.sizeD = 10
			this.userList = []
			this.recordId = val.id
			this.lookVisible = true
			this.getOperateConfigNoticeSelectDetail()
		},
		handleCurrentChangeDialog(val) {
			this.pageD = val
			this.getOperateConfigNoticeSelectDetail()
		},
		handleSizeChangeDialog(val) {
			this.sizeD = val
			this.getOperateConfigNoticeSelectDetail()
		},
		changeTableSort({ column, prop, order }) {
			if (prop === 'createdAt') {
				prop = 1
			}
			this.pageNum = 1
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},

		filterTerminal(val) {
			const arr = val ? val.split(',') : []
			if (arr.length) {
				return arr
					.map((item) => this.typeFilter(item, 'clientType'))
					.join(',')
			}
			return '-'
		},
		joinDeviceTypeArr() {
			const arr = []
			this.loginDeviceType.forEach((item) => {
				arr.push(item.description)
			})
			return arr.length ? arr.join(',') : '-'
		},
		_getSerialNum(index) {
			return (this.pageD - 1) * this.sizeD + index + 1
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
	border: 1px solid #dddddd;
}
::v-deep .tagheight {
	.el-form-item__content,
	.el-select {
		width: 480px;
	}
}
.decoration {
	// text-decoration: underline;
	cursor: pointer;
	color: #4b7902;
}
.fenye {
	text-align: center;
}
</style>
<style>
.el-tooltip__popper {
	max-width: 300px !important;
}
</style>
